<template>
  <div class="fenlei">
    <div class="top">
      <van-icon name="arrow-left" @click="goback"></van-icon>
      <van-search  style="width: 330px; padding-top: 30px;" v-model="placeholder" shape="round" background="#fff" placeholder="请输入搜索关键词"
        @focus="onSearch" />
    </div>
    <div class="main">
      <van-tabs v-model="active" swipeable @click="onClick" color="#00c261">
        <van-tab v-for="(item) in classifyList" :key="item.categoryId" :title="item.categoryId + ''">
          <template #title>
            <div class="topNav">
              <img :src="item.imgsrc">{{ item.classifyname }}
            </div>
          </template>
        </van-tab>
      </van-tabs>
      <div class="mainarea">
        <van-tree-select height="75vh" style="width: 100%;font-size:12px;" :items="asideList"
          :main-active-index.sync="activeKey" @click-nav="changeAside">
          <template #content>
            <div class="content">
              <ProList :list="prolist"></ProList>
            </div>
          </template>
        </van-tree-select>
      </div>
    </div>

    <van-popup v-model="isshow" position="right" :style="{ height: '100%' }">
      <Search_Ranking @change="changeIsshow"></Search_Ranking>
    </van-popup>
    <div class="bottomCar">
      <BottomAddCar></BottomAddCar>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
import ProList from "@/views/classifys/proList.vue"
import Pro from '@/api/pro.js';
import Search_Ranking from "@/views/homes/search_Ranking.vue"
import BottomAddCar from "@/views/pro/bottomAddCar.vue"

export default {
  components: {
    ProList,
    Search_Ranking,
    BottomAddCar
  },
  data() {
    return {
      isshow: false,//搜索组件显示隐藏
      serchList: ["小葱", "黄瓜", "苹果"],
      placeholder: "",
      classifyList: [],
      // classifyList: [
      //   {
      //     "id": 11,
      //     "classifyName": "精选果蔬",
      //     "imgsrc": "https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641"
      //   },
      //   {
      //     "id": 2,
      //     "classifyName": "海鲜水产",
      //     "imgsrc": "https://img0.baidu.com/it/u=1707323632,2172098160&fm=253&fmt=auto&app=120&f=JPEG?w=760&h=1178"
      //   },
      //   {
      //     "id": 3,
      //     "classifyName": "熟食冻品",
      //     "imgsrc": "https://img1.baidu.com/it/u=225041176,855892897&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422"
      //   },
      //   {
      //     "id": 4,
      //     "classifyName": "休闲食品",
      //     "imgsrc": "https://img1.baidu.com/it/u=2844486220,2552809628&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      //   },
      //   {
      //     "id": 5,
      //     "classifyName": "美妆个护",
      //     "imgsrc": "https://img0.baidu.com/it/u=1958837610,173887572&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
      //   },
      //   {
      //     "id": 6,
      //     "classifyName": "肉禽蛋品",
      //     "imgsrc": "https://img1.baidu.com/it/u=624792125,331972384&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      //   },
      //   {
      //     "id": 7,
      //     "classifyName": "粮油速食",
      //     "imgsrc": "https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      //   },
      //   {
      //     "id": 8,
      //     "classifyName": "乳品酒饮",
      //     "imgsrc": "https://img2.baidu.com/it/u=1190464626,3874157898&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
      //   },
      //   {
      //     "id": 9,
      //     "classifyName": "母婴百货",
      //     "imgsrc": "https://img0.baidu.com/it/u=1728098273,3967810851&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
      //   },
      //   {
      //     "id": 10,
      //     "classifyName": "厨具水具",
      //     "imgsrc": "https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
      //   }
      // ],
      asideList: [],
      // asideList: [
      //   {
      //     "id": 1,
      //     "classifyName": "精选果蔬",
      //     "imgsrc": "https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "精选蔬菜"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "时令水果"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "热带水果"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 2,
      //     "classifyName": "海鲜水产",
      //     "imgsrc": "https://img0.baidu.com/it/u=1707323632,2172098160&fm=253&fmt=auto&app=120&f=JPEG?w=760&h=1178",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "贝类"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "虾类"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "鱼类"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 3,
      //     "classifyName": "熟食冻品",
      //     "imgsrc": "https://img1.baidu.com/it/u=225041176,855892897&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "冰淇淋"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "速冻主食"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "烧烤丸类"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 4,
      //     "classifyName": "休闲食品",
      //     "imgsrc": "https://img1.baidu.com/it/u=2844486220,2552809628&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "饼干糕点"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "谷物冲调"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "风味小吃"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 5,
      //     "classifyName": "美妆个护",
      //     "imgsrc": "https://img0.baidu.com/it/u=1958837610,173887572&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "面膜"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "身体护理"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "口腔护理"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 6,
      //     "classifyName": "肉禽蛋品",
      //     "imgsrc": "https://img1.baidu.com/it/u=624792125,331972384&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "蛋品"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "猪肉"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "牛肉"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 7,
      //     "classifyName": "粮油速食",
      //     "imgsrc": "https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "米面油"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "方便速食"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "干货杂粮"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 8,
      //     "classifyName": "乳品酒饮",
      //     "imgsrc": "https://img2.baidu.com/it/u=1190464626,3874157898&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "碳酸/汽水"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "饮用水"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "葡萄酒"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 9,
      //     "classifyName": "母婴百货",
      //     "imgsrc": "https://img0.baidu.com/it/u=1728098273,3967810851&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "宠物食品"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "卫浴用品"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "衣物洗护"
      //       }
      //     ]
      //   },
      //   {
      //     "id": 10,
      //     "classifyName": "厨具水具",
      //     "imgsrc": "https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "child": [
      //       {
      //         "id": 1,
      //         "asideSort": "锅具烹饪"
      //       },
      //       {
      //         "id": 2,
      //         "asideSort": "厨房小电"
      //       },
      //       {
      //         "id": 3,
      //         "asideSort": "口腔护理"
      //       }
      //     ]
      //   }
      // ],
      prolist: [],
      currentclassify: "",
      activeKey: 0,//侧边栏航绑定的当前索引
      active: 0,//顶部nav绑定的当前索引
    }
  },
  mounted() {
    this.getClassifyList1()

  },
  methods: {
    onSearch() {
      this.isshow = true
    },
    changeIsshow(val) {
      this.isshow = false
    },
    onClick(name, title) {//点击顶部导航触发事件，重新获取侧边导航及商品列表,并重新存active
      this.getAsideList1(Number(title))
      this.$store.commit("SET_CHANGEACTIVE",title)
    },
    goback() {
      this.$router.go(-1)
    },
    changeAside(index) {//点击左侧导航触发事件，重新获取商品列表
      this.getProList(this.asideList[index].categoryId)
    },

    async getClassifyList1() {//获取一级分类
      let res = await Pro.getClassifyList()
      this.classifyList = res.data
      console.log(res.data)
      this.classifyList.forEach((item, index) => {
        if (Number(item.categoryId) == this.$store.state.classifyId) {
          this.active = index
          this.getAsideList1()
        }
      })
    },
    async getAsideList1(id = this.$store.state.classifyId) {//获取二级分类
      let res = await Pro.getAsideList({ categoryId: id })
      this.asideList = res.data
      console.log(res.data);
      this.asideList.map(item => item.text = item.classifyname)
      this.getProList(this.asideList[0].categoryId)
    },
    async getProList(id) {//获取三级分类
      let res = await Pro.getProList({ categoryId: id })
      this.prolist = res.data
      // this.prolist.push(
      //   {
      //     "productId": 29,
      //     "proname": "苏泊尔",
      //     "parentId": 38,
      //     "ishot": 0,
      //     "isnewpro": 0,
      //     "istehui": 1,
      //     "unit": "盒",
      //     "oldprice": 108.0,
      //     "newprice": 108.0,
      //     "gettime": "预计明日达",
      //     "iscutdownmoney": 0,
      //     "activity": null,
      //     "img": "https://img2.baidu.com/it/u=2356909974,244949753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
      //     "shopcarcount": 0
      //   }, {
      //     "productId": 29,
      //     "proname": "苏泊尔",
      //     "parentId": 38,
      //     "ishot": 0,
      //     "isnewpro": 0,
      //     "istehui": 1,
      //     "unit": "盒",
      //     "oldprice": 108.0,
      //     "newprice": 108.0,
      //     "gettime": "预计明日达",
      //     "iscutdownmoney": 0,
      //     "activity": null,
      //     "img": "https://img2.baidu.com/it/u=2356909974,244949753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
      //     "shopcarcount": 0
      //   }, {
      //     "productId": 29,
      //     "proname": "苏泊尔",
      //     "parentId": 38,
      //     "ishot": 0,
      //     "isnewpro": 0,
      //     "istehui": 1,
      //     "unit": "盒",
      //     "oldprice": 108.0,
      //     "newprice": 108.0,
      //     "gettime": "预计明日达",
      //     "iscutdownmoney": 0,
      //     "activity": null,
      //     "img": "https://img2.baidu.com/it/u=2356909974,244949753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
      //     "shopcarcount": 0
      //   }, {
      //     "productId": 29,
      //     "proname": "苏泊尔",
      //     "parentId": 38,
      //     "ishot": 0,
      //     "isnewpro": 0,
      //     "istehui": 1,
      //     "unit": "盒",
      //     "oldprice": 108.0,
      //     "newprice": 108.0,
      //     "gettime": "预计明日达",
      //     "iscutdownmoney": 0,
      //     "activity": null,
      //     "img": "https://img2.baidu.com/it/u=2356909974,244949753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
      //     "shopcarcount": 0
      //   }, {
      //     "productId": 29,
      //     "proname": "苏泊尔",
      //     "parentId": 38,
      //     "ishot": 0,
      //     "isnewpro": 0,
      //     "istehui": 1,
      //     "unit": "盒",
      //     "oldprice": 108.0,
      //     "newprice": 108.0,
      //     "gettime": "预计明日达",
      //     "iscutdownmoney": 0,
      //     "activity": null,
      //     "img": "https://img2.baidu.com/it/u=2356909974,244949753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
      //     "shopcarcount": 0
      //   }, {
      //     "productId": 29,
      //     "proname": "苏泊尔",
      //     "parentId": 38,
      //     "ishot": 0,
      //     "isnewpro": 0,
      //     "istehui": 1,
      //     "unit": "盒",
      //     "oldprice": 108.0,
      //     "newprice": 108.0,
      //     "gettime": "预计明日达",
      //     "iscutdownmoney": 0,
      //     "activity": null,
      //     "img": "https://img2.baidu.com/it/u=2356909974,244949753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
      //     "shopcarcount": 0
      //   }, {
      //     "productId": 29,
      //     "proname": "苏泊尔",
      //     "parentId": 38,
      //     "ishot": 0,
      //     "isnewpro": 0,
      //     "istehui": 1,
      //     "unit": "盒",
      //     "oldprice": 108.0,
      //     "newprice": 108.0,
      //     "gettime": "预计明日达",
      //     "iscutdownmoney": 0,
      //     "activity": null,
      //     "img": "https://img2.baidu.com/it/u=2356909974,244949753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
      //     "shopcarcount": 0
      //   }, {
      //     "productId": 29,
      //     "proname": "苏泊尔",
      //     "parentId": 38,
      //     "ishot": 0,
      //     "isnewpro": 0,
      //     "istehui": 1,
      //     "unit": "盒",
      //     "oldprice": 108.0,
      //     "newprice": 108.0,
      //     "gettime": "预计明日达",
      //     "iscutdownmoney": 0,
      //     "activity": null,
      //     "img": "https://img2.baidu.com/it/u=2356909974,244949753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
      //     "shopcarcount": 0
      //   }
      // )
    }
  },
  activated() {
    this.getClassifyList1()

  },
  deactivated() {
    this.$store.commit("SET_CHANGEACTIVE", 1)
  }
}
</script>

<style lang="scss" scoped >
.fenlei {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  >.top {
    height: 10vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  >.main {
    flex: 1;
    height: 100%;
    overflow: hidden;

    .topNav {
      // background: yellow;
      height: 8vh;
      // background-color: #00c261;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      img {
        width: 23px;
        height: 23px;
        border: 1px solid #00c261;
        border-radius: 8px;
      }
    }

    .mainarea {
      display: flex;
      margin: 10px;
    }

    .van-tree-select__content {
      flex: 3;
    }

  }
}

.bottomCar {
  background:none;
  position: fixed;
  bottom: 9vh;
  height: 6vh;
  width: 98vw;
  // margin: 0 auto;
  z-index: 10;
}

</style>